<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 1. 字符编码元数据：指定文档使用UTF-8编码（属性值加双引号，格式规范）
         作用：覆盖全球99%以上字符，确保中文、特殊符号（如“℃”“￥”）无乱码，是页面正常显示的基础 -->
    <meta charset="UTF-8">

    <!-- 2. 浏览器兼容性元数据（补充缺失标签）：强制IE浏览器使用最新内核渲染页面
         作用：解决IE浏览器版本兼容问题，避免因内核老旧导致页面样式错乱（如CSS3属性不支持） -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 3. 视口元数据：适配移动设备（属性值加双引号，格式规范）
         作用：width=device-width让页面宽度等于设备屏幕宽度，initial-scale=1.0设置初始缩放比例为1，
         解决移动设备默认按“PC屏幕宽度”缩放页面导致的文字模糊、布局错乱问题，是响应式开发的核心配置 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 4. 搜索引擎抓取元数据（补充缺失标签）：控制搜索引擎对页面的抓取策略
         作用：name="robots"指定搜索引擎爬虫的行为，content="index,follow"表示“抓取当前页面并跟随页面内链接”，
         若设为“noindex,nofollow”则表示“不抓取当前页面且不跟随链接”，可根据页面需求（如隐私页、测试页）灵活配置 -->
    <meta name="robots" content="index,follow">

    <!-- 5. 页面描述元数据：概括页面核心内容（属性值加双引号，格式规范）
         作用：搜索引擎会将该内容作为搜索结果的“摘要文字”（如百度搜索结果中页面标题下方的描述），
         帮助用户快速判断页面是否符合需求，直接提升搜索结果点击率，是SEO优化的关键标签之一 -->
    <meta name="description" content="本页面是HTML5实验二的第一个任务，详细演示<meta>标签的7类核心用法（字符编码、兼容性、视口、搜索引擎、描述、关键词、作者、自动跳转），配套实验对比说明，帮助学习者理解元数据的实际作用与价值">

    <!-- 6. 页面关键词元数据：指定核心关键词（属性值加双引号，格式规范）
         作用：与页面内容高度相关的关键词（如“HTML5 meta标签”“元数据配置”）可帮助搜索引擎精准识别页面主题，
         当用户搜索这些关键词时，页面更易出现在搜索结果前列，需避免堆砌无关关键词（如“Python”“Java”），否则可能被判定为SEO作弊 -->
    <meta name="keywords" content="HTML5, 元数据标签, meta标签, SEO优化, 视口配置, 浏览器兼容性, 搜索引擎抓取">

    <!-- 7. 文档作者元数据：标注创作者信息（属性值加双引号，格式规范）
         作用：明确文档归属，便于团队协作时追溯版本（如多人开发项目中区分不同开发者的文档），也可用于版权归属声明 -->
    <meta name="author" content="陈泳江">

    <!-- 8. 页面自动跳转元数据：实现定时跳转（属性值加双引号，格式规范）
         作用：http-equiv模拟HTTP响应头，content="3; url=..."表示“3秒后自动跳转到指定URL”，
         常见应用场景：登录成功后跳转首页、活动结束后跳转主页面、临时通知页倒计时跳转等 -->
    <meta http-equiv="refresh" content="3; url=https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta">

    <!-- 9. 外部资源引入（补充缺失的link标签）：关联外部CSS样式表
         作用：通过link标签引入外部CSS文件，实现“结构（HTML）与样式（CSS）分离”，
         相比内嵌样式（<style>）更便于样式复用、维护（如多个页面共用同一套样式），也能减少HTML文件体积 -->
    <link rel="stylesheet" href="styles/meta-lab.css">
    <!-- 10. 页面标题：显示在浏览器标签栏（属性值加双引号，格式规范）
          作用：直观展示页面主题，包含核心关键词（如“HTML元数据标签实验”）可提升SEO相关性，
          用户打开多个标签页时，清晰的标题也便于快速定位目标页面 -->
          <title>HTML元数据标签实验 - lab2-1</title>
        </head>
        
        <body>
        
            <h1>lab2-1：HTML元数据标签的应用</h1>
        
            <h2>元数据（Metadata）：描述数据的数据</h2>
        
            <ul>
        
                <li>本质：提供HTML文档的“隐性信息”，不直接显示在页面上，但被浏览器、搜索引擎、辅助工具（如屏幕阅读器）依赖；</li>
        
                <li>价值：决定页面的“可用性”（如视口适配）、“可发现性”（如SEO）、“兼容性”（如IE内核控制）和“可维护性”（如作者标注）。</li>
        
            </ul>
        
        
        
            <h3>实验1：视口标签（viewport）效果对比</h3>
        
            <p>操作：分别注释/取消注释&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;标签，在手机浏览器中刷新观察：</p>
        
            <ul>
        
                <li>无该标签：页面按“PC屏幕宽度（默认980px）”缩放，手机上文字极小（需手动放大才能阅读），布局错乱；</li>
        
                <li>有该标签：页面宽度适配手机屏幕（如375px），文字大小正常，按钮、表格等元素无需放大即可点击/查看。</li>
        
            </ul>
        
        
        
            <h3>实验2：自动跳转标签（http-equiv="refresh"）效果</h3>
        
            <p>当前页面将在<strong>3秒后自动跳转到MDN的meta标签文档页</strong>，若需取消跳转，可注释该标签或修改content中的时间（如“10”表示10秒后跳转）。</p>
        
        
        
            <h3>实验3：外部CSS引入（link标签）效果</h3>
        
            <p>说明：本页面通过&lt;link rel="stylesheet" href="styles/meta-lab.css"&gt;引入外部样式，若删除该标签，页面将失去自定义样式（如h1标题的颜色、ul列表的缩进），回归浏览器默认样式。</p>
        
        
        
            <hr>
        
            <h3>实验小结：元数据标签核心清单</h3>
        
            <table border="1" style="border-collapse: collapse; width: 100%; margin-top: 10px;">
        
                <thead>
        
                    <tr>
        
                        <th>标签</th>
        
                        <th>核心属性</th>
        
                        <th>作用</th>
        
                        <th>使用注意</th>
        
                    </tr>
        
                </thead>
        
                <tbody>
        
                    <tr>
        
                        <td>&lt;meta charset&gt;</td>
        
                        <td>charset="UTF-8"</td>
        
                        <td>确保中文/特殊符号无乱码</td>
        
                        <td>必须放在&lt;head&gt;最顶部，避免乱码</td>
        
                    </tr>
        
                    <tr>
        
                        <td>&lt;meta http-equiv="X-UA-Compatible"&gt;</td>
        
                        <td>content="IE=edge"</td>
        
                        <td>强制IE用最新内核渲染</td>
        
                        <td>仅针对IE浏览器，现代浏览器（Chrome/Firefox）忽略</td>
        
                    </tr>
        
                    <tr>
        
                        <td>&lt;meta name="viewport"&gt;</td>
        
                        <td>width=device-width, initial-scale=1.0</td>
        
                        <td>适配移动设备</td>
        
                        <td>响应式页面必加，不可省略</td>
        
                    </tr>
        
                    <tr>
        
                        <td>&lt;meta name="robots"&gt;</td>
        
                        <td>content="index,follow"</td>
        
                        <td>控制搜索引擎抓取</td>
        
                        <td>隐私页（如个人中心）建议设为“noindex,nofollow”</td>
                    </tr>

                    <tr>
        
                        <td>&lt;link rel="stylesheet"&gt;</td>
        
                        <td>href="CSS文件路径"</td>
        
                        <td>引入外部CSS样式</td>
        
                        <td>实现结构与样式分离，便于维护</td>
        
                    </tr>
        
                </tbody>
        
            </table>
        
        </body>
        
        </html>